import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class ShopNewsController extends GetxController {
  RxInt type = 0.obs;

  List<String> tabList = ['全部', '电脑', '手机', '数码', '居家', '服装', '洗护', '家电'];

  RxInt tabIndex = 0.obs;

  List<String> imgs = [
    'https://img30.360buyimg.com/babel/s590x470_jfs/t20270514/150247/19/39551/22586/6642c3feF9b76226e/62a2fb73cf2c5749.jpg',
    'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/10075424349847/FocusFullshop/CkNqZnMvdDEvMjI3NTEwLzE2LzE3NTk4Lzg1MjI2LzY2MmQ1ODQyRmU4ZTc2MmFmLzllYWJiZWNhMTQxODc1MDgucG5nEgkxLXR5XzBfNTIwAjjui3pCFQoRVGhpbmtQYWTnrJTorrDmnKwQAUIQCgzpnIfmkrzmnaXkuLQQAkIQCgznq4vljbPmiqLotK0QBkIHCgPmiqIQB1iXvdvwnaUC/cr/s/q.jpg',
    'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100056218937/FocusFullshop/CkNqZnMvdDEvMjMyMjg4LzcvMTYzMTQvMzEyMTczLzY2MzUzOGFjRmM2Y2Y1Y2E5LzcyMzc1OTQyODExYjRjYWIucG5nEgkzLXR5XzBfNTQwAjjui3pCEwoP5oOg5pmu5Y-w5byP5py6EAFCEwoP54mp576O5Lu35pu05LyYEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG56eN6I2JEAdYufrC3vQC/cr/s/q.jpg',
    'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000367/100007360001/FocusFullshop/CkNqZnMvdDEvMTMyODkyLzMyLzQ0NDQyLzY1MTkwLzY2MmVhMWJjRmQ5YTFlNzRiL2Q1NTczZGIzOGI4NGM4N2IucG5nEgk0LXR5XzBfNTUwAjjvi3pCEAoM5rW35bCU5Yaw566xEAFCEwoP54mp576O5Lu35pu05LyYEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG57K-6YCJEAdYgeycx_QC/cr/s/q.jpg',
    'https://imgcps.jd.com/ling-cubic/ling4/lab/amZzL3QxLzE4NTQ4My80LzEyMDE3LzYzNzQyMS82MGRkNzEwOUUzOGNiYjFkNS9jZDAzZGUxOWI3MzM4Yjg0LnBuZw/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/1635188467440111618/cr/s/q.jpg'
  ];
}

class ShopNewsPage extends GetView<ShopNewsController> {
  const ShopNewsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: ToolsUtils.builderLeading(
            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333)),
        title: Obx(() => Container(
              constraints: const BoxConstraints.expand(width: 180, height: 30),
              child: CupertinoSegmentedControl<int>(
                onValueChanged: (int value) {
                  controller.type.value = value;
                },
                children: {
                  0: Container(
                    alignment: Alignment.center,
                    constraints: const BoxConstraints.expand(width: 90, height: 30),
                    child: Text(
                      '新品',
                      style: StylesUtils.customTextStyle(
                          color: controller.type.value == 0
                              ? ColorsUtils.colorFfff
                              : ColorsUtils.colorF048),
                    ),
                  ),
                  1: Container(
                    alignment: Alignment.center,
                    constraints: const BoxConstraints.expand(width: 90, height: 30),
                    child: Text(
                      '预告',
                      style: StylesUtils.customTextStyle(
                          color: controller.type.value == 1
                              ? ColorsUtils.colorFfff
                              : ColorsUtils.colorF048),
                    ),
                  )
                },
                groupValue: controller.type.value,
                borderColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                selectedColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                unselectedColor: Colors.white,
              ),
            )),
        actions: [
          IconButton(onPressed: () {}, icon: SvgUtils.assetName('u3577_2', width: 20, height: 20)),
          IconButton(onPressed: () {}, icon: SvgUtils.assetName('u3578_2', width: 20, height: 20))
        ],
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 130,
              child: Swiper.list<String>(
                  list: controller.imgs,
                  autoplay: true,
                  autoplayDelay: 5000,
                  duration: 500,
                  pagination: SwiperPagination(
                      alignment: Alignment.bottomCenter,
                      builder: DotSwiperPaginationBuilder(
                        activeColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                      )),
                  builder: (_, url, index) {
                    return CachedNetworkImage(
                      imageUrl: url,
                      fit: BoxFit.fill,
                      width: double.infinity,
                      height: 130,
                    );
                  }),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 15.h, horizontal: 15.w),
              child: Obx(() => StaggeredGrid.count(
                    crossAxisCount: 4,
                    crossAxisSpacing: 15,
                    children: controller.tabList
                        .asMap()
                        .map((key, value) => MapEntry(
                            key,
                            TextButton(
                              onPressed: () {
                                controller.tabIndex.value = key;
                              },
                              style: ButtonStyle(
                                  minimumSize: const WidgetStatePropertyAll(Size(70, 30)),
                                  alignment: Alignment.center,
                                  backgroundColor: WidgetStatePropertyAll(key ==
                                          controller.tabIndex.value
                                      ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)
                                      : Colors.white),
                                  shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(5.r),
                                      side: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.color9999),
                                          width: key == controller.tabIndex.value ? 0 : 1)))),
                              child: Text(
                                value,
                                style: StylesUtils.customTextStyle(
                                    color: key == controller.tabIndex.value
                                        ? ColorsUtils.colorFfff
                                        : ColorsUtils.color9999),
                              ),
                            )))
                        .values
                        .toList(),
                  )),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              child: StaggeredGrid.count(
                crossAxisCount: 2,
                crossAxisSpacing: 15,
                mainAxisSpacing: 10,
                children: [
                  Column(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(5.r),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://img.alicdn.com/imgextra/i3/269398378/O1CN01hg74iU2BlBBavdH9e_!!269398378-2-alimamacc.png_360x360xzq75.jpg',
                          // width: 165,
                          width: double.infinity,
                          height: 100,
                          fit: BoxFit.fill,
                          // progressIndicatorBuilder: (context, url, progress) => Center(
                          //   child: CircularProgressIndicator(
                          //     value: progress.progress,
                          //   ),
                          // ),
                          placeholder: (_, value) {
                            return Container(
                              alignment: Alignment.center,
                              child: CircularProgressIndicator(
                                valueColor: AlwaysStoppedAnimation<Color>(
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                              ),
                            );
                          },
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.symmetric(vertical: 10.h),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Apple/苹果 iPhone 14 Pro Max苹果14promax 苹果14pro  新款手机',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '￥4999',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorF048,
                          ),
                        ),
                      )
                    ],
                  ),
                  for (var i = 0; i < 38; i++)
                    Column(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(5.r),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://img.alicdn.com/imgextra/i3/269398378/O1CN01hg74iU2BlBBavdH9e_!!269398378-2-alimamacc.png_360x360xzq75.jpg',
                            // width: 165,
                            width: double.infinity,
                            height: 100,
                            fit: BoxFit.fill,
                            progressIndicatorBuilder: (context, url, progress) => Center(
                              child: CircularProgressIndicator(
                                value: progress.progress,
                              ),
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(vertical: 10.h),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            'Apple/苹果 iPhone 14 Pro Max苹果14promax 苹果14pro  新款手机',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '￥4999',
                            style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorF048,
                            ),
                          ),
                        )
                      ],
                    ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
